<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>访客登记</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">
    <style>
		#vue{
			background-color: #F5F5F4;
		}
		/* .navBar {
		  font-weight: bold;
		  font-size: 1.25rem;
		  z-index: 10;
		  width: 100%;
		  color: #333;
		  background-color: #fff;
		  height: 3.75rem;
		  line-height: 5rem;
		  text-align: center;
		  position: fixed;
		  top: 0;
		  left: 0;
		} */
    </style>
</head>

<body>
    <div id="vue">
		<!-- <div class="navBar">
		  <van-row>
		    <van-col span="24">
		      <span>访客登记</span>
		    </van-col>
		  </van-row>
		</div> -->
		<!-- <div style="font-family: PingFang SC;padding-top: 4.125rem;margin-bottom: 3.4375rem;"> -->
		<div>
			<van-form style="margin-top: 0.3125rem;">
				<h4 style="margin: 0.625rem;">被访人信息</h4>
				<van-cell-group v-if="visitorData">
				  <van-field
					disabled
					v-model="visitorData.interviewee"
					name="被访人"
					label="被访人"
					placeholder="请输入被访人"
				  />
				</van-cell-group>
				<van-cell-group v-if="visitorData">
				  <van-field
					disabled
					v-model="visitorData.intervieweeMobile"
					name="被访人电话"
					label="被访人电话"
					placeholder="请输入被访人电话"
				  />
				</van-cell-group>
				<h4 style="margin: 0.625rem;">访客信息登记</h4>
				<van-cell-group>
				  <van-field
				    required
				    v-model="form.name"
				    name="姓名"
				    label="姓名"
				    placeholder="姓名"
				  />
				</van-cell-group>
				<van-cell-group>
				  <van-field name="radio" label="性别" required>
				    <template #input>
				      <van-radio-group v-model="form.sex">
				        <van-radio :name="0" style="margin-bottom: 0.3125rem;">男</van-radio>
				        <van-radio :name="1">女</van-radio>
				      </van-radio-group>
				    </template>
				  </van-field>
				</van-cell-group>
				<van-cell-group>
				  <van-field
				    required
				    v-model="form.mobile"
				    name="联系方式"
				    label="联系方式"
				    placeholder="请输入您的联系方式"
				  />
				</van-cell-group>
				<van-cell-group>
					<van-cell required is-link title="来访事由" :value="visitorReason" @click="showVisitorReason = true" />
				</van-cell-group>
				<van-cell-group>
					<van-action-sheet v-model="showVisitorReason" :actions="visitorReasonList" @select="onSelect" />
				</van-cell-group>
				<van-cell-group>
				  <van-cell required title="访问开始时间" @click="startTime" is-link :value="form.visitStartTime" />
				</van-cell-group>
				<van-popup v-model="showStartTime" position="bottom" style="height: 40%">
				  <van-datetime-picker
				    @confirm="startConfirm"
				    @cancel="showStartTime = false"
				    v-model="currentDate"
				    type="datetime"
				    title="选择完整时间"
				    :min-date="minDate"
				    :max-date="maxDate"
				  />
				</van-popup>
				<van-cell-group>
				  <van-cell required title="访问结束时间" :value="form.visitEndTime" />
				</van-cell-group>
				<van-cell-group>
				  <van-field name="uploader" label="照片上传" required>
				    <template #input>
				      <van-uploader multiple :max-count="1" v-model="uploader" :after-read="onUploader" :before-delete="delUpload" />
				    </template>
				  </van-field>
				</van-cell-group>
			<van-form>
				<div style="padding: 0.9375rem;background-color: #fff;margin-top: 0.3125rem;">
				  <van-button round block :type="btnType" @click="onSubmit" native-type="submit" disabled :disabled="isDisabled">
				    提交
				  </van-button>
				</div>
		</div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.20.1/locale/zh-cn.js"></script>
<script>
    new Vue({
        el: '#vue',
        data() {
            return {
				isDisabled: false,
				btnType: 'info',
				form: {
				  headUrl: '',
				  mobile: '',
				  name: '',
				  reasonId: '',
				  id: '',
				  sex: '',
				  visitEndTime: '',
				  visitStartTime: ''
				},
				visitorData: null,
				uploader:[],
				startDate: '',
				endDate: '',
				showStartTime: false,
				minDate: new Date(2020, 0, 1),
				maxDate: new Date(2025, 10, 1),
				currentDate: new Date(),
				visitorReason: '',
				showVisitorReason: false,
				visitorReasonList: [],
            }
        },
        mounted() {
			this.parseQueryString('id')
			this.getDetail()
			this.getVisitorReason()
        },
        methods: {
			parseQueryString(str){
			    let url = location.href
				url = url.replace('?','?&').split('&')
				url.forEach(item => {
					if (item.indexOf(str + '=') === 0) {
						this.form.id = item.replace(str + '=', '')
					}
				})
			},
			getDetail() {
				axios.get('http://192.168.1.65:9527/system/visitor/detail', {
					params: {
						id: this.form.id
					}
				})
				 .then(res => {
					 this.visitorData = res.data.data
				 }).catch(error => {
					 console.log(error)
				 })
			},
			
			
			// 上传图片
			onUploader(file) {
			  file.status = 'uploading'
			  file.message = '上传中'
			  let formData = new FormData();  // 声明一个FormData对象
			  formData.append('file', file.file);
			  axios.post('http://192.168.1.65:9527/system/oss/upload',formData)
			   .then(res => {
				 file.status = ''
				 file.message = ''
			  	 this.form.headUrl = res.data.data.fileUrl
			   }).finally(() => {
			    file.status = ''
			    file.message = ''
			  })
			},
			// 删除图片
			delUpload(file) {
			  this.uploader.forEach(item => {
			    if (item.file.name === file.file.name) {
			      let index = this.uploader.indexOf(item);
			      this.uploader.splice(index, 1)
			      this.form.headUrl = ''
			    }
			  })
			},
			
            // 上传图片
            uploadAvatar(file){
				let formData = new FormData();  // 声明一个FormData对象
				formData.append('file', file.file);
				axios.post('http://192.168.1.65:9527/system/oss/upload',formData)
				 .then(res => {
					 this.form.headUrl = res.data.data.fileUrl
				 }).catch(error => {
					 console.log(error)
				 })
            },
            // 获取访问事由
            getVisitorReason() {
				axios.get('http://192.168.1.65:9527/system/visitor/category')
				 .then(res => {
					 this.visitorReasonList = res.data.data.map(item => {
					   return {
					     name: item.text,
					     value: item.value
					   }
					 })
				 }).catch(error => {
					 console.log(error)
				 })
            },
            // 选择访客事由
            onSelect(item) {
              this.showVisitorReason = false;
              this.form.reasonId = item.value
              this.visitorReason = item.name
            },
            // 选择时间
            startTime() {
              this.showStartTime = true
            },
            // 日期选择确定按钮
            startConfirm(val) {
             this.form.visitStartTime = moment(val).format('YYYY-MM-DD HH:mm:ss')
             let end = moment(val).valueOf() + 24*60*60*1000
             this.form.visitEndTime = moment(end).format('YYYY-MM-DD HH:mm:ss')
             this.showStartTime = false
            },
            // 提交登记信息
            onSubmit() {
              if (this.form.name === '') {
                this.$toast.fail('请输入访客姓名');
                return;
              }
            
              if (this.form.mobile === '') {
                this.$toast.fail('请输入访客手机号');
                return;
              }
              let rule = /^1[3456789]\d{9}$/
              if (!rule.test(this.form.mobile)) {
                this.$toast.fail('请输入正确的访客手机号');
                return;
              }
              if (!this.uploader.length) {
                this.$toast.fail('请上传头像');
                return;
              }
              if (this.form.sex === '') {
                this.$toast.fail('请选择性别');
                return;
              }
              if (this.form.visitStartTime === '') {
                this.$toast.fail('请选择到访时间');
                return;
              }
              if (this.form.reasonId === '') {
                this.$toast.fail('请选择访问事由');
                return;
              }
			  axios.post('http://192.168.1.65:9527/system/visitor/acceptinvite',this.form)
			   .then(res => {
				 this.btnType = ''
				 this.isDisabled = true
			     this.$toast('登记成功')
			   })
				.catch(error => {
					console.log(error)
				})
            }
        }
    });


</script>


</html>